src/components/courses/ItemCard.tsx (1)

94-209: Avoid nesting an interactive button inside the outer Link.

CompareButton renders a button (see src/components/courses/CompareButton.tsx lines 37-89), and it’s nested inside the outer Link, which creates invalid nested interactive elements and can confuse keyboard/screen-reader users. Consider moving the Link to just the “View Details” affordance or making the card itself navigable without an anchor wrapper.

💡 Possible restructure (Link only wraps “View Details”)

-  return (
-    <Link href={link} className="block w-full group">
-      <Card
+  return (
+    <Card
         className={`h-full overflow-hidden transition-all duration-300 border border-border/60 bg-card/40 backdrop-blur-sm hover:border-primary/50 hover:bg-card/60 hover:shadow-xl hover:shadow-primary/5 ${
           isHovered ? 'scale-[1.02]' : 'scale-100'
         } ${className || ''}`}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
       >
...
-        <CardFooter className="px-4 py-3 bg-background/40 backdrop-blur-sm border-t border-border/40 flex justify-between items-center group-hover:bg-primary/5 transition-all duration-300">
+        <CardFooter className="px-4 py-3 bg-background/40 backdrop-blur-sm border-t border-border/40 flex justify-between items-center group-hover:bg-primary/5 transition-all duration-300">
           {type === 'course' ? (
             <>
               <CompareButton course={item as Course} />
-              <div className="flex items-center gap-2">
+              <Link href={link} className="flex items-center gap-2">
                 <div className="text-xs font-bold font-mono tracking-wide text-primary">
                   View Details
                 </div>
                 <div className="p-1.5 rounded-md bg-primary/10 group-hover:bg-primary/20 group-hover:translate-x-1 transition-all duration-300">
                   <ChevronRight className="h-3.5 w-3.5 text-primary" />
                 </div>
-              </div>
+              </Link>
             </>
           ) : (
-            <>
+            <Link href={link} className="flex items-center gap-2">
               <div className="text-xs font-bold font-mono tracking-wide text-primary">
                 View Details
               </div>
               <div className="p-1.5 rounded-md bg-primary/10 group-hover:bg-primary/20 group-hover:translate-x-1 transition-all duration-300">
                 <ChevronRight className="h-3.5 w-3.5 text-primary" />
               </div>
-            </>
+            </Link>
           )}
         </CardFooter>
-      </Card>
-    </Link>
+    </Card>
   );

src/app/courses/compare/page.tsx (1)

18-19: Avoid double‑fetching courses on the compare page.

This page calls useCourses, and CourseSelector also calls useCourses, which likely triggers two full fetch cycles. Consider lifting the data into the page and passing it down to avoid duplicate network work.

Example adjustment in this file

-            <CourseSelector
-              selectedCourses={selectedCourses}
-              onCoursesChange={handleCoursesChange}
-              maxCourses={4}
-            />
+            <CourseSelector
+              selectedCourses={selectedCourses}
+              onCoursesChange={handleCoursesChange}
+              maxCourses={4}
+              courses={courses}
+            />

Additional change needed in src/components/courses/compare/CourseSelector.tsx (outside this file): accept a courses prop and remove the internal useCourses call so data is fetched once.

Also applies to: 102-106

src/components/courses/CompareButton.tsx (3)

40-40: Remove unused state variable comparisonCount.

The comparisonCount state is updated in the effect but never read or rendered. This adds unnecessary overhead.

♻️ Suggested fix

 export function CompareButton({ course }: CompareButtonProps) {
   const [isInComparison, setIsInComparison] = useState(false);
-  const [comparisonCount, setComparisonCount] = useState(0);

   useEffect(() => {
     const updateState = () => {
       const list = getComparisonList();
       setIsInComparison(list.includes(course.id));
-      setComparisonCount(list.length);
     };

---

92-92: Consider documenting the requirement that courses must contain all potentially selected courses.

The courses prop must include all courses that could be in the comparison list. If a user adds courses on one page and navigates to another page with a different/partial courses array, selectedCourses will be incomplete, causing a mismatch between the badge count and displayed items.

Consider either:

1. Fetching course details by IDs when needed, or
2. Storing full course objects (not just IDs) in localStorage, or
3. Adding a comment documenting this constraint for maintainers.

---

182-189: Consider adding aria-label to the remove button for better accessibility.

The remove button only contains an icon, which may not be clear to screen reader users.

♿ Suggested fix

                 <Button
                   variant="ghost"
                   size="sm"
                   onClick={() => handleRemoveCourse(course.id)}
                   className="ml-2"
+                  aria-label={`Remove ${course.code} from comparison`}
                 >
                   <X className="h-4 w-4" />
                 </Button>